<template>
  <div v-if="
      $route.name == 'index' ||
        $route.name == 'zhaofang' ||
        $route.name == 'faxian' ||
        $route.name == 'wode'
    ">
    <van-tabbar v-model="active" inactive-color="#666666" active-color="#000000" fixed placeholder>
      <van-tabbar-item replace v-for="(item, index) in tabbarList" :key="index" :to="item.path">
        <span>{{ item.title }}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    name: "tabbar",
    data() {
      return {
        active: 0,
        tabbarList: [
          {
            path: "/",
            title: "首页",
            normal: "/images/index2.png",
            active: "/images/index1.png",
          },
          {
            path: "/zhaofang",
            title: "找房",
            normal: "/images/zhaofang2.png",
            active: "/images/zhaofang1.png",
          },
          {
            path: "/faxian",
            title: "发现",
            normal: "/images/faxian2.png",
            active: "/images/faxian1.png",
          },
          {
            path: "/wode",
            title: "我的",
            normal: "/images/wode2.png",
            active: "/images/wode1.png",
          },
        ],
      };
    },

    //监听路由变化
    watch: {
      $route(to) {
        this.activeTab(to.path);
      },
    },

    methods: {
      activeTab(path) {
        var index = this.tabbarList.map((item) => item.path).indexOf(path);
        if (index != -1) {
          this.active = index;
        }
      },
    },
  };
</script>